<template>
  <div class="data-pool">
    <el-button icon="el-icon-plus" type="success" @click="openDataPool">新增分销产品</el-button>
    <el-dialog width="90%" top="50px" title="分销数据池" v-model="showDialog" append-to-body>
      <!-- <el-button icon="el-icon-plus" type="success" @click="addEmptyData" style="margin-bottom: 10px;">直接添加一个空数据</el-button> -->
      <el-tabs tab-position="left" v-model="activeTab" @tab-click="clickTab" style="height: 70vh">
        <el-tab-pane
          :label="item.label"
          :name="item.name"
          lazy
          v-for="(item, index) in poolType"
          :key="index"
        >
          <search-list
            :ref="pushRef"
            :api-url="item.url"
            :itemPerRow="4"
            row-key="id"
            class="quan"
            @selection-change="selectionChange"
          >
            <!-- 多选 -->
            <el-table-column type="selection" :reserve-selection="true"></el-table-column>
            <!-- 渲染不同的数据 -->
            <template v-if="item.name === 'courses'">
              <!-- 课程 -->
              <el-table-column prop="courseId" label="courseId"></el-table-column>
              <el-table-column prop="title" label="合集标题"></el-table-column>
              <el-table-column prop="nickname" label="教师昵称"></el-table-column>
              <el-table-column prop="level" label="难度等级">
                <template #default="scope">
                  {{ $selectFormat['courseLevelSl'](scope.row.level).label }}
                </template>
              </el-table-column>
              <el-table-column prop="cover" label="课程封面">
                <template #default="scope">
                  <img class="cover" :src="scope.row.cover" />
                </template>
              </el-table-column>
              <el-table-column prop="lessionCnt" label="教学课讲数"></el-table-column>
              <el-table-column prop="payPriceStr" label="价格">
                <template #default="scope">{{ scope.row.payPriceStr }}元</template>
              </el-table-column>
              <el-table-column prop="categoryName" label="课程分类名称"></el-table-column>
            </template>

            <template v-if="item.name === 'video'">
              <!-- 单视频 -->
              <el-table-column prop="videoId" label="videoId"></el-table-column>
              <el-table-column prop="title" label="视频标题"></el-table-column>
              <el-table-column prop="categoryName" label="视频分类名称"></el-table-column>
              <el-table-column prop="level" label="难度等级">
                <template #default="scope">
                  {{ $selectFormat['courseLevelSl'](scope.row.level).label }}
                </template>
              </el-table-column>
              <el-table-column prop="cate" label="视频类别">
                <template #default="scope">
                  {{ $selectFormat['courseSl'](scope.row.cate).label }}
                </template>
              </el-table-column>
              <el-table-column prop="payMode" label="付费类型">
                <template #default="scope">
                  {{ $selectFormat['paySl'](scope.row.payMode).label }}
                </template>
              </el-table-column>
              <el-table-column prop="payPriceStr" label="实际价格">
                <template #default="scope">{{ scope.row.payPriceStr }}元</template>
              </el-table-column>
              <el-table-column prop="showPriceStr" label="划线价格">
                <template #default="scope">{{ scope.row.showPriceStr }}元</template>
              </el-table-column>
            </template>

            <template v-if="item.name === 'train'">
              <!-- 线下特训营 -->
              <el-table-column prop="id" label="Id"></el-table-column>
              <el-table-column prop="title" label="特训营名称"></el-table-column>
              <el-table-column prop="level" label="难度等级">
                <template #default="scope">
                  {{ $selectFormat['courseLevelSl'](scope.row.level).label }}
                </template>
              </el-table-column>
              <el-table-column prop="online" label="特训营类型">
                <template #default="scope">
                  {{ $selectFormat['online'](scope.row.online).label }}
                </template>
              </el-table-column>
              <el-table-column prop="location" label="线下地点"></el-table-column>
              <el-table-column prop="population" label="招生人数"></el-table-column>
              <el-table-column prop="price" label="费用（元）"></el-table-column>
              <el-table-column prop="priceDetail" label="价格描述"></el-table-column>
              <el-table-column prop="onlineAt" label="开课时间"></el-table-column>
              <el-table-column prop="period" label="期数"></el-table-column>
            </template>

            <template v-if="item.name === 'learnpath'">
              <!-- 学习路径 -->
              <el-table-column prop="id" label="Id"></el-table-column>
              <el-table-column prop="title" label="标题"></el-table-column>
              <el-table-column prop="payMode" label="付费类型">
                <template #default="scope">
                  {{ $selectFormat['paySl'](scope.row.payMode).label }}
                </template>
              </el-table-column>
              <el-table-column prop="cover" label="背景图">
                <template #default="scope">
                  <img class="cover" :src="scope.row.cover" />
                </template>
              </el-table-column>
              <el-table-column prop="online" label="上线状态">
                <template #default="scope">
                  {{ $selectFormat['onlineSl'](scope.row.online).label }}
                </template>
              </el-table-column>
              <el-table-column prop="priceStr" label="金额">
                <template #default="scope">{{ scope.row.priceStr }}元</template>
              </el-table-column>
              <el-table-column prop="showPriceStr" label="显示金额">
                <template #default="scope">{{ scope.row.showPriceStr }}元</template>
              </el-table-column>
            </template>

            <!-- vip -->
            <template v-if="item.name === 'vip'">
              <el-table-column prop="id" label="Id"></el-table-column>
              <el-table-column prop="vipName" label="标题"></el-table-column>
              <el-table-column prop="cover" label="图片">
                <template #default="scope">
                  <img class="cover" :src="scope.row.cover" />
                </template>
              </el-table-column>
              <el-table-column prop="priceStr" label="金额">
                <template #default="scope">{{ scope.row.priceStr }}元</template>
              </el-table-column>
              <el-table-column prop="showPriceStr" label="显示金额">
                <template #default="scope">{{ scope.row.showPriceStr }}元</template>
              </el-table-column>
            </template>

            <!-- 操作 -->
            <el-table-column label="操作">
              <template #default="scope">
                <el-button @click="selectOne(scope.row)">选择这个</el-button>
              </template>
            </el-table-column>

            <template v-slot:btn-after class="btn-after">
              <el-button @click="selectMulti" v-if="state.multipleSelection.length">
                确定选这{{ state.multipleSelection.length }}个
              </el-button>
            </template>
          </search-list>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script setup>
// 这个就是事件总线哦
  import bus from '@/bus';

  import {
    defineProps,
    reactive,
    ref,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    getCurrentInstance,
    nextTick,
  } from 'vue';

  const {
    $url: url,
    $http: http,
    $selectFormat: selectFormat,
  } = getCurrentInstance().appContext.config.globalProperties;

  // Data & Props
  // 数据池tab
  const poolType = ref([
    {
      label: '合集课程',
      name: 'courses',
      url: url.SaleProductPoolCourses,
    },
    {
      label: '单视频课程',
      name: 'video',
      url: url.SaleProductPoolVideos,
    },
    {
      label: '线下特训营',
      name: 'train',
      url: url.SaleProductPoolCamps,
    },
    {
      label: '学习路径',
      name: 'learnpath',
      url: url.SaleProductPoolLearnPaths,
    },
    {
      label: 'vip产品',
      name: 'vip',
      url: url.SaleProductPoolVips,
    },
  ]);

  // 弹出框
  const showDialog = ref(false);
  // 默认打开的tab
  const activeTab = ref('courses');
  // 所有ref
  let arrRefs = [];
  // 产品类型对应的productType
  const PRODUCT_TYPE_POOL = {
    vip: 'id',
    courses: 'courseId',
    video: 'showVideoId',
    train: 'id',
    learnpath: 'learnPathId',
  };
  // 产品类型对应的productId
  const PRODUCT_ID_POOL = ['vip', 'courses', 'video', 'train', 'learnpath'];

  const state = reactive({
    // 选中
    multipleSelection: [],
  });

  // Methods
  // 组件通信事件
  // const emit = defineEmits(['datapoolselect']);

  // 展示数据池
  const openDataPool = () => {
    showDialog.value = !showDialog.value;
  };
  // 加空数据
  const addEmptyData = () => {
    bus.$emit('dataPoolSelect', { productType: 1 });
    showDialog.value = false;
  };
  // 复选框选中
  const selectionChange = (val) => {
    state.multipleSelection = val;
  };
  // 选中一个或者多个数据
  const selectMulti = () => {
    state.multipleSelection.forEach((item, index) => {
      // 相当于选中一个
      selectOne(item);
    });
  };
  // 表格的选中一个
  const selectOne = (val) => {
    // 匹配productType和productId
    val.productType = PRODUCT_ID_POOL.indexOf(activeTab.value);
    val.productId = val[PRODUCT_TYPE_POOL[activeTab.value]];

    bus.$emit('dataPoolSelect', JSON.parse(JSON.stringify(val)));
    state.multipleSelection = [];
    clear();
    showDialog.value = false;
  };
  // tab切换
  const clickTab = () => {
    state.multipleSelection = [];
    arrRefs = [];
    // 这里才能得到获取之后的ref
    setTimeout(() => {
      clear();
    }, 10);
  };
  // 获得ref
  const pushRef = (val) => {
    arrRefs.push(val);
  };
  // 清空选择
  const clear = () => {
    arrRefs.forEach((item) => {
      item.$refs.searchTable.clearSelection();
    });
  };

  // Life Circle
  onBeforeUpdate(() => {});
  onUpdated(() => {});
  onMounted(() => {});
</script>
<style lang="less" scoped>
  .data-pool {
    padding: 0px 10px;
  }
  :deep(.el-tabs__content) {
    height: 100%;
    overflow-y: scroll;
  }
  .cover {
    display: inline-block;
    width: 135px;
  }
</style>
